<template>
  <div class="person">
    姓名：{{ person.name }} <br />
    年龄：{{ person.age }} <br />
    <button @click="changeName">更改姓名</button>
    <button @click="changeAge">更改年龄</button>
    <button @click="changePerson">更改人员</button>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Person',
}
</script>

<script lang="ts" setup>
import { reactive, watch } from 'vue'

let person = reactive({ name: '李四', age: 48 })

function changeName() {
  person.name = '张三'
}
function changeAge() {
  person.age += 1
}
function changePerson() {
  Object.assign(person, { name: '赵五', age: 26 })
}

// 监视 reactive 定义的 对象类型; 监测的是对象的地址值;默认是深度监测的
watch(person, (newVal, oldVal) => {
  console.log(newVal, oldVal)
})
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 10px;
}
button {
  margin: 0 5px;
}
</style>
